<template>
	<view class=" all-center" :class="'type'+type" @click="uploadImages">
		<view class="flex f-d-c a-i-c color-959595 f-s-22">
			<block v-if="src === ''">
				<block v-if="iconType === '1'">
					<image class="xiangji-icon" src="@/static/images/xiangji-icon.svg" mode=""></image>
					点击拍照/上传
				</block>
				<block v-else>
					<image class="upload-add-icon1" src="@/static/images/tabbar/upload-add-icon1.svg" mode=""></image>
				</block>
			</block>
		</view>
		
		<block v-if="isVideo">
			<video class="image" v-if="src!=''" :id="videoId" @play="playFullScreen" :src="src"></video>
		</block>
		<block v-else>
			<image class="image" v-if="src!=''" :src="src" mode="aspectFit"></image>
		</block>
		<image class="del-icon-view" v-if="src!==''" @click.stop="delItem" src="@/static/images/image-del-icon.svg" mode=""></image>
	</view>
</template>

<script>
	export default {
		name:"uploadBox",
		props:{
			src:{
				type:String,
				default:""
			},
			current:{
				type:[Number,String],
				default:0
			},
			iconType:{
				type:String,
				default:"1"
			},
			type:{
				type:String,
				default:"1"
			},
			buttonType:{
				type:String,
				default:"other"
			},
		},
		computed:{
			isVideo(){
				var videoRegex = /\.(mp4|avi|mov|webm)$/i;
				return videoRegex.test(this.src) 
			}
		},
		data() {
			return {
				videoId: 'my-video'
			};
		},
		methods:{
			playVideo() {
			  // 视频开始播放时，暂停全屏播放
			  uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			  });
			},
			playFullScreen() {
			  var videoContext = uni.createVideoContext(this.videoId, this);
			  videoContext.play();
			  videoContext.requestFullScreen();
			},
			uploadImages(){
				let that = this
				// uploadVideo
				if(that.buttonType === 'circle'){
					uni.showActionSheet({
						itemList:["图片","视频"],
						success(res) {
							if(res.tapIndex === 1){
								that.util.uploadVideo().then(res=>{
									console.log(res)
									that.$emit("success",{
										index:that.current,
										url:res.data.fullurl
									})
								})
							}else{
								that.uploadImagesa()
							}
						}
					})
				}else{
					that.uploadImagesa()
				}
			},
			uploadImagesa(){
				let that = this
				that.util.uploadFile().then(res=>{
					that.$emit("success",{
						index:that.current,
						url:res.data.fullurl
					})
				})
			},
			delItem(){
				console.log("current")
				this.$emit("del",this.current)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image{
		width: 100%;
		height: 100%;
	}
	.type2{
		width: 160upx;
		height: 160upx;
		margin-bottom: 20upx;
		background: #FAFAFA;
		border-radius: 16upx;
		position: relative;
		margin-right: 6upx;
	}
	.type3{
		width: 200upx;
		height: 200upx;
		margin-bottom: 20upx;
		background: #FAFAFA;
		border-radius: 16upx;
		position: relative;
		margin-right: 6upx;
	}
	.type1{
		width: 196upx;
		height: 196upx;
		margin-right: 12upx;
		margin-bottom: 26upx;
		background: #FAFAFA;
		border-radius: 16upx;
		position: relative;
	}
	.del-icon-view{
		position: absolute;
		width: 32upx;
		height: 32upx;
		top: -16upx;
		right: -16upx;
		z-index: 2;
	}
	.xiangji-icon{
		width: 50upx;
		height: 48upx;
		margin-bottom: 32upx;
	}
	.upload-add-icon1{
		width: 64upx;
		height: 64upx;
	}
</style>